<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-11-11 13:45:20
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:22:55
-->
<template>
  <div class="app-container">
    <div class="chioose-header">
      <div class="chioose-header-left">
        <div
          class="tab-title"
          v-for="(item, index) in tabList"
          :key="index"
          :class="item.id === active1 ? 'active1' : ''"
          @click="changeTab(item)"
        >
          {{ item.label }}
        </div>
      </div>
    </div>
    <el-button
      type="primary"
      size="default"
      @click="batchAgree"
      v-if="active1 == 0"
      style="margin-left: 20px; margin-top: 20px"
    >
      批量同意
    </el-button>
    <el-button
      type="primary"
      size="default"
      @click="batchRefuse"
      style="margin-left: 20px; margin-top: 20px"
      v-else
    >
      批量删除
    </el-button>

    <el-table
      :data="applyData"
      style="width: 100%"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      :height="tableHight"
    >
      <template slot="empty" class="emptyBg">
        <img src="@/assets/images/empty.jpg" alt="" />
      </template>
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="申请人姓名" prop="applyName" fixed>
      </el-table-column>
      <el-table-column label="手机号" prop="applyPhone"> </el-table-column>
      <el-table-column label="申请理由" prop="applyReason"> </el-table-column>
      <el-table-column label="申请时间" prop="applyTime"> </el-table-column>
      <el-table-column label="审核结果" v-if="status == 2">
        <template slot-scope="scope">
          {{ scope.row.status == 2 ? "同意" : "拒绝" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" v-if="status == 1">
        <template slot-scope="scope">
          <span
            style="margin-right: 10px; color: #1259fa; cursor: pointer"
            @click="agree(scope.row)"
          >
            同意
          </span>
          <span
            style="color: #1259fa; cursor: pointer"
            @click="refuse(scope.row)"
          >
            拒绝
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" v-else>
        <template slot-scope="scope">
          <span style="color: #1259fa; cursor: pointer" @click="del(scope.row)">
            删除
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      background
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      layout=" ->,total, sizes, prev, pager, next, jumper "
      :total="total"
    >
    </el-pagination>
    <el-dialog
      title="审核同意"
      v-if="dialog.agreeShowEject"
      :visible.sync="dialog.agreeShow"
      width="60%"
      @close="agreeClose"
    >
      <div v-if="multipleSelection.length > 1">
        <el-steps :active="active" finish-status="success">
          <el-step
            title="信息填写"
            v-for="(item, index) in multipleSelection"
            :key="index"
          >
          </el-step>
        </el-steps>
        <div>
          <div v-for="(item, index) in multipleSelection" :key="index">
            <div v-if="active == index">
              <batch-agree :item="item" ref="agree"></batch-agree>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <batch-agree :item="multipleSelection[0]" ref="agree"></batch-agree>
      </div>
      <span slot="footer">
        <el-button @click="dialog.agreeShow = false">取消</el-button>
        <el-button type="primary" @click="next">下一步</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { applyList, agree, refuse, deleteApply } from "@/api/sys";
import batchAgree from "./conponments/toExamine/batchAgree.vue";
export default {
  components: { batchAgree },
  data() {
    return {
      tableHight: window.innerHeight - 330,
      dialog: {
        agreeShow: false,
        agreeShowEject: false,
      },
      active: 0,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      ids: [],
      multipleSelection: [],
      applyData: [],
      active1: 0,
      status: 1,
      users: [],
      tabList: [
        {
          id: 0,
          label: "待审核",
        },
        {
          id: 1,
          label: "已审核",
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 330;
      })();
    };
  },
  activated() {
    this.tableHight = window.innerHeight - 330;
  },
  methods: {
    // 关闭批量同意
    agreeClose() {
      this.dialog.agreeShowEject = false;
      this.active = 0;
      this.users = [];
    },

    // 下一步
    next() {
      let arr = [];
      for (var i = 0; i < this.$refs.agree.length; i++) {
        this.$refs.agree[i].$refs.staffFrom.validate((valid) => {
          if (!valid) {
            arr.push("false");
          } else {
            this.users.push(this.$refs.agree[i].staffFrom);
            arr.push("true");
          }
        });
      }
      let a = arr.some((item) => {
        return item == "false";
      });
      if (a == true) {
        return;
      } else {
        if (this.active++ === this.multipleSelection.length - 1) {
          this.active = this.active - 1;
          agree(this.users).then((res) => {
            this.$message.success(res.msg);
            this.dialog.agreeShow = false;
          });
        }
      }
    },
    // 同意
    agree(row) {
      this.multipleSelection = [];
      this.multipleSelection.push(row);
      this.batchAgree();
    },
    // 拒绝
    refuse(row) {
      refuse({
        id: row.id,
      }).then((res) => {
        this.$message.success(res.msg);
        this.getList();
      });
    },
    // 删除
    async del(row) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该审核条件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        let ids = [];
        ids.push(row.id);
        deleteApply(ids).then((res) => {
          this.$message.success(res.msg);
          this.getList();
        });
      }
      // console.log('确认了删除')
    },
    // 批量同意
    batchAgree() {
      if (this.multipleSelection.length == 0) {
        this.$message.info("请选择人员");
      } else {
        this.dialog.agreeShowEject = true;
        this.$nextTick(function () {
          this.dialog.agreeShow = true;
        });
      }

      // agree(this.ids).then((res) => {
      //   if (res.code !== 200) return this.$message.error(res.msg);
      //   this.$message.success(res.msg);
      //   this.getList();
      // });
    },
    // 批量删除
    async batchRefuse() {
      if (this.multipleSelection.length == 0) {
        this.$message.info("请选择人员");
      } else {
        const confirmResult = await this.$confirm(
          "此操作将批量删除该审核条件, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        ).catch((err) => err);
        /*如果用户确认打印confirm,如果用户取消显示cancel*/
        if (confirmResult !== "confirm") {
          return this.$message.info("已取消删除!");
        } else {
          deleteApply(this.ids).then((res) => {
            this.$message.success(res.msg);
            this.getList();
          });
        }
      }

      // console.log('确认了删除')
    },
    // tab切换
    changeTab(item) {
      this.active1 = item.id;
      if (item.id == 0) {
        this.status = 1;
        this.getList();
      } else if (item.id == 1) {
        this.status = 2;
        this.getList();
      }
    },
    // 获取数据
    getList() {
      applyList({
        status: this.status,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      }).then((res) => {
        this.applyData = res.rows;
        this.total = res.total;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
    // 表格前多选器
    handleSelectionChange(val) {
      console.log(this.multipleSelection);
      this.multipleSelection = val;
      this.ids = [];
      val.forEach((item) => {
        this.ids.push(item.id);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.chioose-header {
  width: 100%;
  height: 64px;
  line-height: 64px;
  border-bottom: 1px solid #ececec;
}
.chioose-header-left {
  display: flex;
}
.tab-title {
  display: flex;
  margin-right: 40px;
  cursor: pointer;
  font-size: 16px;
}
.active1 {
  border-bottom: 2px solid #1267fa;
  color: #1267fa;
  font-weight: 700;
}
.fw-table {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
</style>